<div id="app">
    <admin-page-header>
        <bi-button icon="fa-plus" type="primary" @click="$go({action:'edit',gets:{part:part_id}})">添加文章</bi-button>
    </admin-page-header>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">

                <bi-card title="搜索" style="margin-bottom:var(--box-margin-bottom);">
                    <div class="row g-2">
                        <div class="col-12 col-sm-3 col-lg-3">
                            <web-part  v-model="search.part_id" placeholder="全部栏目" ></web-part>
                        </div>
                        <div class="col-12 col-sm-3 col-lg-3">
                            <bi-select v-model="search.status"  placeholder="请选择状态" :option="$pageData.articleStatusOption"  >
                                
                            </bi-select>
                        </div>
                        <div class="col-12 col-sm-9 col-lg-6">
                            <bi-input v-model="search.keyword"  placeholder="" icon="fa fa-search" ></bi-input>
                        </div>
                    </div>
                </bi-card>

                <bi-card title="文章列表">
                    <bi-table checkbox :data="list" :loading="loading" min-height="300">
                        <bi-table-column label="状态" name="status_title" width="70"></bi-table-column>
                        <bi-table-column label="标题" name="title"  v-slot="{row}">
                            <span :style="row.title_style" >{{row.title}}</span>
                        </bi-table-column>
                        <bi-table-column label="用户" name="admin_user_nick" width="100"></bi-table-column>
                        <bi-table-column label="管理" width="120"  v-slot="{row}">
                            <bi-button type="primary" @click="$go({action:'edit',gets:{article:row.article_id}})"  >编辑</bi-button>
                            <bi-button type="warning" @click="handleDel(row)" >删除</bi-button>
                        </bi-table-column>
                    </bi-table>

                    <template #footer>
                        <bi-pagination v-model="page" :total="total" :count="count" ></bi-pagination>
                    </template>
                </bi-card>    
            </div>
        </div>
    </div>

</div>

<script>
import webPart from 'field/part.vue';
import {debounce} from '@@/admin/assets/js/global.js';
let app = admin.createApp({
    components:{
        webPart
    },
    data(){

       let search= {
            status:'',
            keyword:'',
            part_id:this.$pageData.part_id
        }
        search  = this.$assign(search,this.$status.get('search'));

        return {
            part_id:this.$pageData.part_id,
            total:0,
            count:0,
            page:this.$status.get('page')??1,
            list:[],
            loading:false,
            search,
        }
    },
    watch:{
        search:{
            handler:debounce(function(val){
                if (val.part_id!=this.$pageData.part_id){
                    this.$go({gets:{part:val.part_id}});
                }
                this.page = 1;
                this.refresh();
            },1000),
            deep:true
        },
        page(val){
            this.refresh();
        }        
    },
    methods:{
        refresh(){

            this.$status.set('page',this.page);
            this.$status.set('search',this.search);

            this.$ajax({
                url:this.$url({action:'list'}),
                data:{
                    page:this.page,
                    part_id:this.part_id,
                    ...this.search
                },
                success:(res)=>{
                    this.list = res.list;
                    this.total = res.total;
                    this.count = res.count;
                }
            });
        },
        handleDel(item){
            this.$confirm('确定删除吗？',()=>{
                this.$ajax({
                    url:this.$url({action:'del'}),
                    data:{
                        article_id:item.article_id
                    },
                    success:(res)=>{
                        this.refresh();
                    }
                });
            });
        }
    },
    mounted(){
        this.refresh();
    }
}).mount('#app');

</script>